import { Menu, Switch, Divider } from 'antd';
import React, { useCallback } from "react";
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
  LinkOutlined,
  LogoutOutlined
} from '@ant-design/icons';
import { Link } from 'react-router-dom';
import {delUserFromStorage} from "../../utils/storage"
import { useDispatch } from 'react-redux';
import { logOutAction } from '../../store/action';

const { SubMenu } = Menu;

const UserMenu = () => {
  const dispatch = useDispatch();
  const logOut = useCallback(()=>{
    delUserFromStorage();
    dispatch(logOutAction());
  },[]);
  return (
    <>
      <Menu
        style={{ width: 300 }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
      >
        <Menu.Item key="1" icon={<MailOutlined />}>
          <Link to={"changeInfo"}>修改用户信息</Link>
        </Menu.Item>
        <Menu.Item key="2" icon={<CalendarOutlined />}>
          <Link to={"createVideo"}>创建视频</Link>
        </Menu.Item>
        <Menu.Item key="3" icon={<CalendarOutlined />}>
          <Link to={"openLive"}>开启直播</Link>
        </Menu.Item>
        <Menu.Item key="4" icon={<CalendarOutlined />}>
          <Link to={"VideoManage"}>视频管理</Link>
        </Menu.Item>
        <Menu.Item key="5" icon={<LogoutOutlined />} onClick={logOut}>
          <Link to={"/login"}>退出登录</Link>
        </Menu.Item>
      </Menu>
    </>
  );
};


export default UserMenu;